{{- $items := partial "helpers/subitems.html" . -}}

{{- $self := . -}}
{{- .page_scratch.Add "js" (dict "file" "syna-portfolio.js") -}}
{{- $bg := .self.Scratch.Get "bg" }}

{{- partial "helpers/container.html" (dict "start" true "in_slot" .in_slot "bg" $bg "id" .id "Params" .Params) -}}
  {{- partial "helpers/section-header.html" (dict "self" $self.self "bg" $bg "params" .Params) }}
  <div class="row justify-content-center">
    {{- if eq (len $items) 0 }}
      {{- partial "helpers/empty-subpath.html" (dict "context" "portfolio" "root" $) -}}
    {{- else -}}
      {{- range (sort $items ".Params.weight") }}
        <div class="col-lg-4 col-md-9 col-12 py-2">
          <div
            class="border rounded position-relative portfolio-item overflow-hidden 
              {{- if not .Params.item_url }} has-modal {{- end -}}
              {{- with .Params.background -}}
                {{- if .image -}}
                  {{- print " has-background" -}}
                {{- end -}}
              {{- end -}}
            "
            {{- if $self.Params.height -}}
              {{- safeHTMLAttr (printf "style='min-height:%s; height:%s'" $self.Params.height $self.Params.height) -}}
            {{- end -}}>
            {{- if .Params.item_url }}
              <a href="{{ .Params.item_url | relLangURL }}">
            {{- end }}
                {{- $this := . -}}
                {{- with .Params.background -}}
                  {{- if .image -}}
                    <img src="{{ partial "helpers/image.html" (dict "root" $self "this" $this "asset" . "resize" "500x380") }}" class="portfolio-background img-fluid" alt="{{ .text }}">
                  {{- end -}}
                {{- end -}}
                {{- with .Params.asset -}}
                  {{- if .image -}}
                    <img src="{{ partial "helpers/image.html" (dict "root" $self "this" $this "asset" . "resize" "500x380") }}" class="portfolio-image img-fluid" alt="{{ .text }}">
                  {{- else if .icon }}
                    <span class="portfolio-icon fa-stack fa-3x m-2" title="{{ .text }}">
                      <i class="{{ .icon }} fa-stack-2x fa-inverse"></i>
                      <span class="sr-only">{{ .text }}</span>
                    </span>
                  {{- end -}}
                {{- end -}}
                <div class="position-absolute hover-overlay"></div>
                {{- if .Params.labels -}}
                  <div class="position-absolute text-light badge-container">
                    {{- range .Params.labels -}}
                      <span class="badge badge-dark">
                        <i class="{{ .icon }}"></i>
                        <span>{{ .title }}</span>
                      </span>
                    {{- end -}}
                  </div>
                {{- end -}}
                {{- if or .Params.title .Params.subtitle }}
                  <div class="position-absolute description-container col">
                    <div class="row flex-column justify-content-center description text-light p-2 rounded text-center">
                      {{ if .Params.title }}<h5 class="title">{{ .Params.title }}</h5>{{ end }}
                      {{ if .Params.subtitle }}<h6 class="subtitle">{{ .Params.subtitle }}</h6>{{ end }}
                    </div>
                  </div>
                {{- end }}
                <div class="content hidden">{{ .Content }}</div>
            {{- if .Params.item_url }}
              </a>
            {{- end }}
          </div>
        </div>
      {{- end -}}
    {{- end }}
  </div>
{{- partial "helpers/container.html" (dict "end" true "in_slot" .in_slot) -}}
